<template>
  <div class="trading-heard trading-heard-embed" style="padding: 10px 5px">
    <el-tooltip class="item" effect="dark" :content="!themeLight ? $t('nav.night') : $t('nav.day')" placement="bottom">
      <span class="heard-embed iconfont"
        v-if="$route.name==='embedTrade'"
        @click="handleThemeLight()"
        :class="themeLight ? 'icon-deng' : 'icon-4'">
      </span>
    </el-tooltip>
    <div class="flex">
      <div class="heads head1 flexc">
        <div class="bilogo" v-if="coinInfoForIndex" :class="{'tronIcon': $appName === 'tronNewdex'}">
          <!-- <img :src="'https://ndx.340wan.com/static/img/coinImg/' + trad.a.name + '.png'" alt=""> -->
          <!-- <img alt="" :src="coinInfoForIndex.imageUrl || 'https://ndi.340wan.com/upload/20180919/ed752ac2f6174370bf879620ec821eee.png'"> -->
          <img v-if="$appName === 'eosNewdex' &&
            trad.a.code === 'eosio.token' &&
            trad.a.name.toLowerCase() === 'eos' &&
            trad.valuationCoinInfo.contract !== 'issue.newdex'"
            :src="`https://ndi.340wan.com/${trad.baseChain}/${trad.b.code}-${trad.b.name.toLowerCase()}.png`"
            alt="">
          <img v-else
            alt=""
            :src="$appName === 'eosNewdex' ?
            `https://ndi.340wan.com/${trad.baseChain}/${trad.a.code}-${trad.a.name.toLowerCase()}.png`
            : `https://ndi.340wan.com/${trad.baseChain}/${trad.a.name.toLowerCase()}.png`">
        </div>
        <div>
          <p class="fontb" style="white-space: nowrap;"><em class="color-fff">{{trad.a.name}}</em> / {{trad.b.name}}</p>
          <div>
            <span @click="handleGetCionInfo" class="colorThis fontx" style="cursor: pointer;"
              v-if="trad.a.name === 'EOS' && usdsList.find(v => v === trad.b.name)">
              {{ $t('jy.about1') }}EOS{{ $t('jy.about2') }}
            </span>
            <span @click="handleGetCionInfo" class="colorThis fontx" style="cursor: pointer;"
              v-else>
              {{$t('jy.bzjs')}}
            </span>
            <span @click="usdsVisible = true;" class="colorThis fontx" style="margin-left: 10px; cursor: pointer;"
              v-if="trad.a.name === 'EOS' && usdsList.find(v => v === trad.b.name)">
              {{ $t('jy.about1') }}{{ trad.b.name }}{{ $t('jy.about2') }}
            </span>
            <span v-if="$store.state.app.trade.symbol1_code === 'newdexissuer'"
              @click="handleSituation"
              style="color: #278EDA; font-size: 12px;margin-left: 15px; cursor: pointer;">{{ $t('ndxStake.situations') }}</span>
          </div>
        </div>
      </div>
      <div class="flex" style="flex: 1">
        <!-- 最新价 -->
        <div class="heads head2" style="flex: 1.4;">
          <p>{{$t('jy.newprice')}}</p>
          <span class="fontb fontcd color-333"
          v-if="hdData && hdData.price"
          :class="{'color-red' : hdData.change < 0, 'color-sl' : hdData.change > 0}">
            {{toFixed(toNonExponential(hdData.price), trad.priceDecimal)}}
            <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
            <!-- 法币估值 -->
            /<span v-if="$store.state.app.language === 'zh-CN'">
              <span v-if="$store.state.app.pricesCurrentcy[trad.b.name] * hdData.price < 0.1 && trad.priceDecimal">
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{ handlePriceNumber(trad.b.name, hdData.price, trad.priceDecimal) }}
              </span>
              <span v-else>
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{Number(toNonExponential($store.state.app.pricesCurrentcy[trad.b.name] * hdData.price)).toFixed(2)}}
              </span>
            </span>
            <span v-else>
              <span v-if="$store.state.app.pricesCurrentcy[trad.b.name] * hdData.price < 0.1 && trad.priceDecimal">
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{ handlePriceNumber(trad.b.name, hdData.price, trad.priceDecimal) }}
              </span>
              <span v-else>
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{Number(toNonExponential($store.state.app.pricesCurrentcy[trad.b.name] * hdData.price)).toFixed(2)}}
              </span>
            </span>
          </span>
          <span class="ml5 color-999 fontd" v-else>
            {{toFixed(0, trad.priceDecimal)}} <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
          </span>
        </div>
        <!-- 24H涨跌幅 -->
        <div class="heads head3">
          <p>24H{{$t('jy.zdf')}}</p>
          <span class="fontcd color-333"
          :class="{'color-red' : hdData.change < 0, 'color-sl' : hdData.change > 0}">
          {{ hdData.change && hdData.change > 0 ? `+${handleChangeDate(hdData.change)}%` :
          (hdData.change ? `${handleChangeDate(hdData.change)}%` : "0.00%") }}</span>
        </div>
        <!-- 24H最高价 -->
        <div class="heads head4">
          <p>24H{{$t('jy.zgj')}}</p>
          <span class="fontcd color-fff color-333"
          v-if="hdData && hdData.high">{{toFixed(toNonExponential(hdData.high), trad.priceDecimal)}}
            <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
          </span>
          <span v-else class="fontcd color-fff color-333">
            {{toFixed(0, trad.priceDecimal)}} <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
          </span>
        </div>
        <!-- 24H最低价 -->
        <div class="heads head5">
          <p>24H{{$t('jy.zdj')}}</p>
          <span
            class="fontcd color-fff color-333"
            v-if="hdData && hdData.low">
            {{toFixed(toNonExponential(hdData.low), trad.priceDecimal)}}
            <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
          </span>
          <span v-else class="fontcd color-fff color-333">
            {{toFixed(0, trad.priceDecimal)}} <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
          </span>
        </div>
        <!-- 24H成交量 -->
        <div class="heads head8" style="flex: 1.4; cursor: pointer;" @click="handleCommand">
          <p>
            <span class="changeType">
              <span v-if="showType">24H{{$t('jy.cjl')}}</span>
              <span v-else>{{$t('footer.total24H')}}</span>
              <i class="iconfont icon-shangxia" style="font-size: 14px;"></i>
            </span>
          </p>
          <span v-if="showType">
            <span class="fontcd color-fff color-333">{{toFixed(hdData.amount, trad.coinDecimal) || '0.0000'}}</span>
            <span class="ml5 color-999 fontd">{{trad.a.name}}</span>
          </span>
          <span v-else>
            <span class="fontcd color-fff color-333">{{toFixed(hdData.volume, trad.valuationCoinDecimal) || '0.0000'}}</span>
            <span class="ml5 color-999 fontd">{{trad.b.name}}</span>
          </span>
        </div>
      </div>
    </div>
    <div
      class="coinInfobox collapse-transition"
      :class="{'hideCoinInfobox' : showcoinInfo}"
      style="margin-top: 10px;"
      :style="{'height': coinHeight + 'px'}"
      v-loading="cionLoading">
      <div ref="coinInfoRef" style="border-top: 1px solid rgba(0, 0, 0, .08);">
        <div class="flex" style="align-items: flex-start; padding: 20px 10px 10px;" :style="{'visibility': cionLoading ? 'hidden' : ''}">
          <div class="coinaside" v-if="coinInfo" style="padding: 0 20px">
            <h3 class="titlecoin"
            v-if="trad.a.name === 'EOS' && usdsList.find(v => v === trad.b.name)">
              {{ $t('jy.about1') }}EOS{{ $t('jy.about2') }}
            </h3>
            <h3 class="titlecoin" v-else>
              {{$t('jy.bzjs')}}
            </h3>
            <div style="line-height: 30px;">
              {{coinInfo.introduction}}
            </div>
          </div>
          <div :style="{'max-width': coinInfo && coinInfo.introduction ? '' : '500px'}" class="flex cionfor">
            <div class="item" v-if="coinInfo && coinInfo.publishCount&&$appName === 'eosNewdex'">
              <span class="name">{{$t('jy.faxzl')}}</span>
              <a class="data"
                v-if="coinInfo.chain === 'eos'"
                :href="`${getChainHref('eos')}/tokens/${trad.a.name}`"
                target="_blank">
                {{coinInfo.publishCount | numeralFormat}}
              </a>
              <span v-else>{{coinInfo.publishCount | numeralFormat}}</span>
            </div>
            <div class="item" v-if="coinInfo && coinInfo.publishCountForTron">
              <span class="name">{{$t('jy.circulation')}}</span>
              <a class="data"
                :href="coinInfo.publishCountForTronHref"
                target="_blank">
                {{coinInfo.publishCountForTron | numeralFormat(coinInfo.forTronDecimals)}}
              </a>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.circulateCount&&$appName === 'eosNewdex'">
              <span class="name">{{$t('jy.liutongzl')}}</span>
              <a class="data"
                v-if="coinInfo.chain === 'eos'"
                :href="`${getChainHref('eos')}/tokens/${trad.a.name}`"
                target="_blank">
                {{coinInfo.circulateCount | numeralFormat}}
              </a>
              <span v-else>
                {{coinInfo.circulateCount | numeralFormat}}
              </span>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.contract">
              <span v-if="$appName === 'eosNewdex'">
                <span class="name">{{$t('jy.heyuename')}}</span>
                <a class="data" @click="handleToContract(coinInfo.contract)">
                  {{coinInfo.contract}}
                </a>
              </span>
              <!-- 合约地址 -->
              <span v-if="$appName === 'tronNewdex'">
                <span class="name">{{$t('candyBox.contractName')}}</span>
                <a class="data" @click="handleToContract(coinInfo.contract)">
                  {{coinInfo.contract1}}
                </a>
                <i class="iconfont icon-fuzhi ml5"
                  v-clipboard:copy="coinInfo.contract"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  style="cursor: pointer;"></i>
              </span>
            </div>
            <!-- 流通市值 -->
            <div class="item" v-if="coinInfo&&coinInfo.circulateCount&&$appName === 'eosNewdex'">
              <span class="name">
                {{ $t('jy.ltshizhi') }}
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`${$t('jy.ltshizhi')} = ${$t('jy.liutongzl')} × ${$t('jy.newprice')}`"
                  placement="top"
                  popper-class="darkIcon">
                  <i class="iconfont icon-huaban" style="padding: 0;"></i>
                </el-tooltip>
              </span>
              <span class="data">
                <span v-if="$store.state.app.language === 'zh-CN'">
                  <span class="color666">￥{{ Number(toNonExponential(hdData.price *
                    $store.state.app.pricesCurrentcy[trad.b.name]
                    * coinInfo.circulateCount / 10000)).toFixed(2) }}
                  </span>
                  万
                </span>
                <span v-else>
                  <span class="color666">
                    ${{ Number(toNonExponential(hdData.price *
                    $store.state.app.pricesCurrentcy[trad.b.name]* coinInfo.circulateCount / 1000000)).toFixed(2) }}
                  </span>
                  Million
                </span>
              </span>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.marketValueRank">
              <span class="name">{{$t('jy.shizhipaim')}}</span>
              <span class="data">{{coinInfo.marketValueRank | numeralFormat}}</span>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.circulateValue">
              <span class="name">{{$t('jy.ltshizhi')}}</span>
              <span class="data">{{coinInfo.circulateValue | numeralFormat}}</span>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.turnoverRate">
              <span class="name">{{$t('jy.changhand')}}</span>
              <span class="data">{{coinInfo.turnoverRate}}</span>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.icoCost">
              <span class="name">{{$t('jy.mzallmoney')}}</span>
              <span class="data">{{coinInfo.icoCost | numeralFormat}}</span>
            </div>
            <div class="item" v-if="coinInfo&&coinInfo.website">
              <!-- <span class="name">{{$t('jy.guangw')}}</span> -->
              <span style="opacity: .6; font-size: 12px;">{{$t('jy.guangw')}}: </span>
              <a :href="coinInfo.linkUrl" class="data" target="_blank" v-if="coinInfo.linkUrl">
                {{coinInfo.website}}
              </a>
              <a :href="coinInfo.website" class="data" target="_blank" v-else>
                {{coinInfo.website}}
              </a>
            </div>
          </div>
        </div>
      </div>
      <a :href="toContractHref" target="_blank" ref="toContractHref" class="hidden"></a>
    </div>
    <!-- 流通情况弹窗 -->
    <el-dialog
      class="mortgageNdx"
      :visible.sync="mortgageNdxVisible"
      width="384px"
      center>
      <mortgage-ndx
      :MortgageStatus="MortgageStatus"
      :mortgageNdxVisible = "mortgageNdxVisible"/>
    </el-dialog>
    <!-- 关于usds介绍 -->
    <el-dialog
      class="usdsDialog"
      :title="`${$t('jy.about1')}${trad.b.name}${$t('jy.about2')}`"
      :visible.sync="usdsVisible"
      width="525px"
      center>
      <usds :usdsVisible="usdsVisible" :trad="trad" :chain="coinInfoForIndex && coinInfoForIndex.chain"/>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import Io from '@/utils/socket/index'
import MortgageNdx from '@/views/myWallet/member/components/MortgageNdx'; // 流通情况弹窗
import { toFixed, accMul, toNonExponential, GetChainHref } from '@/utils/validate';
import Usds from './Usds'; // 流通情况弹窗

export default {
  name: 'trading-heard',
  data() {
    return {
      hdData: {
        precision: {
          coin: 4,
          price: 4
        }
      },
      showcoinInfo: true,
      coinHeight: 0,
      coinInfo: null,
      cionLoading: false,
      ticker: '',
      theme: '',
      themeLight: false,
      themelist: [
        {
          name: 'theme-1B1D27',
          value: '#1B1D27',
          light: '#1B1D27'
        },
        {
          name: 'theme-278EDA',
          value: '#1B1D27',
          light: '#1B1D27'
        },
      ],
      showType: true,
      MortgageStatus: 3, // 流通情况
      mortgageNdxVisible: false, // 流通情况弹窗
      toContractHref: '', // 跳转到合约地址
      usdsVisible: false, // 关于usds介绍
      usdsList: [],
      coinHeightTimer: null,
    };
  },
  props: {
    trad: Object,
    coinInfoForIndex: Object,
  },
  watch: {
    'trad.id': function change() {
      if (this.ticker !== '') {
        Io.cfwsUnsubscribe(`ticker.${this.ticker}`); // 取消头部订阅
      }
      this.ticker = this.trad.symbol;
      this.handleLoadHeardWs();
      this.showcoinInfo = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.handleMaxCoin();
        });
      })
    },
    '$store.state.app.language': function change() {
      this.showcoinInfo = true;
    },
    coinInfoForIndex: function change(val) {
      this.coinInfo = val;
      // this.handleMaxCoin();
    }
  },
  components: {
    MortgageNdx,
    Usds
  },
  created() {
  },
  mounted() {
    this.usdsList = this.$store.state.app.stableCode;
    this.themeLight = this.$store.state.app.theme !== 'theme-278EDA';
  },
  beforeDestroy() {
    Io.cfwsUnsubscribe(`ticker.${this.ticker}`); // 取消头部订阅
  },
  methods: {
    // 获取详情高度
    handleGetCoinInfoHeight() {
      this.coinHeight = this.$refs.coinInfoRef.offsetHeight;
      if (this.coinHeightTimer && this.coinHeight > 50) {
        clearInterval(this.coinHeightTimer)
      }
    },
    // 获取头部信息
    handleLoadHeardWs() {
      const params = {
        symbol: this.ticker,
      }
      Io.cfwsHeard(params, (data) => {
        this.hdData = data;
        this.$store.dispatch('setMarketPrice', data);
      });
    },

    // 获取详情
    handleGetCionInfo() {
      if (!this.showcoinInfo) {
        this.showcoinInfo = true;
        return;
      }
      // this.handleMaxCoin();
      this.cionLoading = true;
      this.showcoinInfo = false;
      this.coinHeight = this.$refs.coinInfoRef.offsetHeight + 20;
      if (this.coinHeight > 50) {
        this.cionLoading = false;
      }
    },

    // 获取最大和当前发行量
    handleMaxCoin() {
      if (this.$appName === 'tronNewdex') {
        this.handleMaxCoinForTron()
        return;
      }
      // 获取币种发行量
      this.cionLoading = true;
      let nodeobj = null;
      const nodeChecked = this.$store.state.app.nodeChecked;
      nodeobj = nodeChecked[this.trad.baseChain];
      const kip = nodeobj.url;
      const params = {
        code: this.trad.a.code,
        symbol: this.trad.a.name,
      };
      axios.post(`${kip}/v1/chain/get_currency_stats`, params, {
        headers: {
          'Content-Type': 'text/plain;charset=UTF-8',
        }
      }).then((result) => {
        this.cionLoading = false;
        if (result.status === 200) {
          const res = result.data;
          this.coinInfo.publishCount = this.coinInfoForIndex.publishCount || parseInt(res[params.symbol].max_supply, 10);
          this.coinInfo.circulateCount = this.coinInfoForIndex.circulateCount || parseInt(res[params.symbol].supply, 10);
        }
      }).catch(() => {
        this.cionLoading = false;
        this.coinInfo.publishCount = this.coinInfoForIndex.publishCount;
        this.coinInfo.circulateCount = this.coinInfoForIndex.circulateCount;
      })
    },

    // 获取最大和当前发行量
    handleMaxCoinForTron() {
      this.cionLoading = true;
      const address = this.coinInfo.contract;
      let code = this.trad.a.code;
      // code = 'TZGQJY1QbZuXJmMgDgoZVeG4mD1Ef6SdWU';
      let url = `https://apilist.tronscan.org/api/token_trc20?contract=${code}&showAll=1`;
      this.coinInfo.contract1 = `${address.substring(0, 5)}...${address.substring(address.length - 5, address.length)}`;
      if (this.trad && this.trad.b.trc === 'trc10') {
        code = this.trad.a.code;
        // code = '1001091'
        url = `https://apilist.tronscan.org/api/token?id=${code}&showAll=1`;
        this.coinInfo.contract1 = address;
      }
      axios.get(url, {
        headers: {
          'Content-Type': 'text/plain;charset=UTF-8',
        }
      }).then((result) => {
        this.cionLoading = false;
        if (result.status === 200) {
          if (this.trad && this.trad.b.trc === 'trc10' && result.data.data.length > 0) {
            const data = result.data.data[0];
            // 发行量
            this.coinInfo.publishCountForTron = data.totalSupply;
            this.coinInfo.forTronDecimals = 0;
            code = this.trad.b.code;
            this.coinInfo.publishCountForTronHref = `https://tronscan.org/#/token/${code}`
          }
          if (this.trad && this.trad.b.trc === 'trc20' && result.data.trc20_tokens.length > 0) {
            const data = result.data.trc20_tokens[0];
            // 发行量
            this.coinInfo.publishCountForTron = Number(data.total_supply_with_decimals) / (10 ** data.decimals);
            this.coinInfo.forTronDecimals = data.decimals;
            this.coinInfo.publishCountForTronHref = `https://tronscan.org/#/token20/${code}`
          }
          return;
        }
        this.coinInfo.publishCountForTron = null;
        this.$nextTick(() => {
          this.coinHeightTimer = setInterval(() => {
            this.handleGetCoinInfoHeight()
          }, 500);
        })
      }).catch(() => {
        this.cionLoading = false;
        this.coinInfo.publishCountForTron = null;
        this.$nextTick(() => {
          this.coinHeightTimer = setInterval(() => {
            this.handleGetCoinInfoHeight()
          }, 500);
        })
      })
    },

    handleCommand() {
      this.showType = !this.showType;
    },
    // 前往合同 action -- 合约名
    handleToContract(action) {
      // 波场合约
      if (action.length > 12) {
        this.toContractHref = `https://tronscan.org/#/contract/${action}`;
      } else if (this.$appName === 'tronNewdex') {
        this.toContractHref = `https://tronscan.org/#/token/${action}`;
      } else {
        const chain = this.coinInfoForIndex.chain;
        this.toContractHref = `${GetChainHref(chain)}/account/${action}`;
        if (chain === 'enu' || chain === 'fibos') {
          this.toContractHref = `${GetChainHref(chain)}/contracts/${action}`;
        }
      }
      this.$nextTick(() => {
        this.$refs.toContractHref.click();
      });
    },
    // 内嵌交易页 改变主题
    handleThemeLight() {
      this.themeLight = !this.themeLight;
      const themeLight = this.$store.state.app.theme;
      const theme = themeLight === 'theme-278EDA' ? 'theme-1B1D27' : 'theme-278EDA';
      this.$store.dispatch('setTheme', theme);
    },
    // 显示流通情况弹窗
    handleSituation() {
      this.mortgageNdxVisible = true;
    },
    toFixed(numb, p) {
      return toFixed(numb, p);
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
    handleChangeDate(change) {
      const ch = accMul(change, 100);
      return toFixed(ch, 2);
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
    getChainHref(chain) {
      return GetChainHref(chain)
    },
    handlePriceNumber(symbolArea, price, precision) {
      try {
        const a = this.$store.state.app.pricesCurrentcy[symbolArea];
        const b = toNonExponential(a * price);
        if (this.$store.state.app.language === 'zh-CN') {
          const p = precision >= 4 ? precision - 2 : precision;
          const c = Number(toFixed(b, p)).toFixed(p);
          const d = Number(c) ? Number(b).toFixed(p) : toNonExponential(Number(Number(b).toFixed(precision)))
          // return Number(b.toFixed(p)) ? b.toFixed(p) : b.toFixed(precision)
          return d;
        }
        const p = precision >= 4 ? precision - 1 : precision;
        const c = Number(toFixed(b, p)).toFixed(p);
        const d = Number(c) ? Number(b).toFixed(p) : toNonExponential(Number(Number(b).toFixed(precision)))
        return d;
        // return Number(b.toFixed(p)) ? b.toFixed(p) : b.toFixed(precision)
      } catch (error) {
        console.log(error); // eslint-disable-line
        return '0.00';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";


.coinaside{

  .titlecoin{
    opacity: .7;
    font-size: 16px;
  }
}
.changeType {
  cursor: pointer;
  i {
    color: #278EDA;
  }
}
.cionfor {
  max-width: 550px;
  min-width: 550px;
  flex-wrap: wrap;

  .item {
    padding: 0 20px 20px;
    justify-content: center;
    min-width: 220px;

    .name{
      font-size: 12px;
      text-align: left;
      padding: 0 10px 0 0;
      opacity: .6;
      display: block;
    }

    .data{
      text-align: left;

      // &:hover {
      //   .color999, .color666 {
      //     color: RGBA(0, 148, 213, 1);
      //   }
      // }
    }

    .color999 {
      color: #999;
    }

    .color666 {
      color: #666;
    }
  }
}
.trading-heard-embed {
  position: relative;
  .heard-embed {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    z-index: 100;
  }
  // .heard-embed.icon-4 {
  //   color: #fff;
  // }
}
.trading-heard {
  .ml5.fontd {
    margin-left: 2px !important;
  }

  padding: 5px;

  .heads {
    text-align: left;
    flex: 1;

    p {
      color: #999;
      padding-bottom: 5px;
    }
  }

  .head1 {
    position: relative;
    text-align: left;
    margin-right: 20px;
    padding-right: 10px;
    max-width: 260px;

    p.fontb {
      padding-bottom: 0;

      em {
        font-size: 24px;
      }
    }

    &::before {
      content: ' ';
      position: absolute;
      width: 1px;
      height: 85%;
      background: #dedede;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .bilogo {
    position: relative;
    width: 45px;
    height: 45px;
    background: #fff;
    margin-right: 10px;
    border-radius: 100%;
    background-color: #fff;
    background-image: url('https://ndi.340wan.com/upload/20180919/ed752ac2f6174370bf879620ec821eee.png');
    background-size: cover;
    border-radius: 50%;

    img {
      // border-radius: 100%;
      // box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, .2);
      vertical-align: middle;
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 50%;

      &::after {
        content: '';
        background-image: url('https://ndi.340wan.com/upload/20180919/ed752ac2f6174370bf879620ec821eee.png');
        background-size: cover;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 50%;
      }
    }
  }

  .tronIcon {
    background-image: url('../../../assets/img/tron-default.png?v=1.0.1');
    background-size: cover;

    img {
      &::after {
        background-image: url('../../../assets/img/tron-default.png?v=1.0.1');
        background-size: cover;
      }
    }
  }
}

.usdsDialog {
  /deep/ .el-dialog__header {
    padding-top: 45px;
  }

  /deep/ .el-dialog__body {
    padding: 10px 35px 45px;
  }
}

.coinInfobox {
  overflow: hidden;

  /deep/ .el-loading-mask {
    // background: rgba(255, 255, 255, 1)
  }
}
.hideCoinInfobox {
  visibility: hidden;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  margin-top: 0 !important;
}

em {
  font-style: normal;
}

.fontb {
  // font-weight: bold;
}
.fontcd {
  font-size: 16px !important;
}


.color-999 {
  color: #333;
}
.color-sl {
  color: #67C269 !important;
}
.color-red {
  color: #FF1739 !important;
}
.color-fff {
  color: rgba(0, 0, 0, .7);
}
.theme-278EDA {
  .color-333 {
    color: #333;
  }
}
.theme-1B1D27 {
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }

  .trading-heard {

    .heads {
      p {
        color: $-table-head;
      }
    }

    .head1 {
      p.fontb {
        em {
        }
      }

      &::before {
        background: rgba(255, 255, 255, .08);
      }
    }

    .bilogo {
      img {
        padding: 1px;
        // box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .3);
      }
    }
  }

  .color-999, .color666, .color999 {
    color: #7b8db9 !important;
  }

  .trading-heard-embed .heard-embed {
    color: rgba(255, 255, 255, 0.8)
  }

  .data{
    // &:hover {
    //   .color999, .color666 {
    //     color: RGBA(0, 148, 213, 1) !important;
    //   }
    // }
  }
}
</style>

